<template>
  <GanttChart :data="data"></GanttChart>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import GanttChart from './components/gantt-chart.vue'

let data = ref({
  data: [
    {
      title: '1级标题',
      children: [
        {
          subTitle: '二级标题',
          children: [
            [
              {
                width: '50%',
                left: '150%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性病仍缺乏有效治疗方法',
              },
              {
                width: '100%',
                left: '0%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性病仍缺乏有效治疗方法',
              },
            ],
            [
              {
                width: '100%',
                left: '0%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢...',
              },
              {
                width: '100%',
                left: '100%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性病仍缺乏rewqtr',
              },
              {
                width: '100%',
                left: '200%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性rweqrwqe',
              },
            ],
          ],
        },
        {
          subTitle: '222二级标题',
          children: [
            [
              {
                width: '100%',
                left: '50%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性病仍缺乏有效治疗方法',
              },
              {
                width: '100%',
                left: '200%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性病...',
              },
              {
                width: '100%',
                left: '200%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性病仍缺乏有效治疗方法',
              },
            ],
            [
              {
                width: '100%',
                left: '50%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性病仍缺乏有效治疗方法',
              },
              {
                width: '100%',
                left: '200%',
                name: '肿瘤、心脑血管疾病、遗传病等许多复杂疾病及慢性病仍缺乏有效治疗方法',
              },
            ],
          ],
        },
      ],
    }
  ],
  title: ['2017-2020', '2021-2025', '2026-2030'],
})
</script>
